<template>
  <div>
    <div class="top">
      <el-avatar
        v-if="
          !path.includes('other') &&
          route.query.type == undefined &&
          !path.includes('detail')
        "
        style="cursor: pointer"
        :size="80"
        @click="nav"
      >
        <img v-if="userInfo?.image" :src="userInfo.image" />
        <span v-else>登录</span>
      </el-avatar>
      <el-avatar @click="nav2" v-else style="cursor: pointer" :size="80">
        <img v-if="userInfo?.image" :src="userInfo.image" />
        <span v-else>{{ userInfo?.username || "" }}</span>
      </el-avatar>
      <div style="line-height: 40px">
        {{ userInfo?.username || "" }}
      </div>
      <div class="fans">
        <span>关注：{{ userInfo?.focus ? userInfo.focus : 0 }}</span>
        <span>粉丝：{{ userInfo?.follow ? userInfo.follow : 0 }}</span>
      </div>
      <el-button v-if="!disabled || isOwn" type="primary" @click="focusMore"
        >关注</el-button
      >
      <el-button v-else type="info" @click="cancel">取消关注</el-button>
      <div class="hobby">
        <p>TA的兴趣：</p>
        <div class="tags">
          <el-tag type="primary" v-for="(item, index) in hobby" :key="index">{{
            item.tagName
          }}</el-tag>
        </div>
      </div>
    </div>
    <div class="center" v-if="isShow">
      <div class="title">公告</div>
      <div class="main">
        <div
         style="cursor: pointer;"
          class="list"
          v-for="(item, index) in notice"
          :key="index"
          @click="view(item)"
        >
          <div class="text">{{ item.title }}</div>
          <div class="content">{{ item.content }}</div>
        </div>
      </div>
    </div>
    <div class="center" v-show="isShow">
      <div class="title">排行榜</div>
      <div class="main">
        <div class="list" v-for="(item, index) in listBD" :key="index">
          <div class="text">{{ index + 1 }}</div>
          <div class="content">{{ item.title }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  onMounted,
  reactive,
  defineEmits,
  watch,
  getCurrentInstance,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import {
  getHobby,
  getOtherinfo,
  focus,
  getFocus,
  getFans,
  cancelFocus,
} from "@/api/user";
import { getNotices, getOneArticle, getPhb } from "@/api/article";
const { proxy } = getCurrentInstance();
const emits = defineEmits();
const router = useRouter();
const route = useRoute();
const store = useStore();
const userInfo = ref({});
const hobby = ref([]);
const notice = ref([]);
const isShow = ref(true);
const path = ref("");
const disabled = ref(false);
const originalPath = ref("");
const specialFocus = ref(0);
const specialFollow = ref(0);
const getArt = async () => {
  let res = await getOtherinfo(store.state.userId);
  userInfo.value = res.data;
};

watch(
  () => router.currentRoute.value.path,
  async (newValue, oldValue) => {
    path.value = newValue;
    let token = localStorage.getItem("token");
  if(token){
    getFocus().then((res) => {
      specialFocus.value = res.data.length;
      focusData.value = res.data;
      let isFocus = focusData.value.findIndex(
        (item) => item.id == store.state.userId
      );
      if (isFocus == -1) {
        disabled.value = false;
      } else {
        disabled.value = true;
      }
    });
    getFans().then((res) => {
      specialFollow.value = res.data.length;
    });
  }
    if (
      (newValue.includes("other") && route.query.type == "ovo") ||
      route.query.type == "other" ||
      newValue.includes("detail")
    ) {
      try {
        await getArt();
        let res = await getHobby(userInfo.value.id);
        hobby.value = res.data;
        isShow.value = false;
      } catch (error) {}
    } else if (newValue.includes("other") && route.query.type == "ava") {
      try {
        let res = await getOtherinfo(store.state.userId);
        userInfo.value = res.data;
        isShow.value = false;
      } catch (error) {}
    } else {
      let res = await getNotices();
      notice.value = res.data.rows;
      userInfo.value = store.state.loginUserInfo;
      if (userInfo.value) {
        let result = await getHobby(userInfo.value.id);
        hobby.value = result.data;
        userInfo.value.focus = specialFocus.value;
      userInfo.value.follow = specialFollow.value;
      }
    

      isShow.value = true;
    }
    if ( token &&  (userInfo.value.id == store.state.loginUserInfo.id)) {
      isOwn.value = true;
    } else {
      isOwn.value = false;
    }
  },
  { immediate: true }
);
const listBD = ref([]);
const getBD = async () => {
  try {
    let res = await getPhb();
    listBD.value = res.data;
  } catch (e) {}
};
const focusData = ref([]);
const isOwn = ref(false);

onMounted(() => {
  getBD();
});
const start = () => {
  emits("open", true);
};
const nav = () => {
  let token = localStorage.getItem("token");
  if (token) {
    store.commit("joinUserId", userInfo.value.id);
    router.push("/my");
  } else {
    start();
  }
};
const nav2 = () => {
  let token = localStorage.getItem("token");
  if (token) {
    store.commit("joinUserId", userInfo.value.id);
    router.push({ path: "/other", query: { type: "ava" } });
  }
};
const view = (item) => {
  router.push({ path: "/notice", query: { id: item.id } });
};
const focusMore = () => {
  let token = localStorage.getItem("token");
  if(!token){
    proxy.$modal.msgWarning("还没有登录哦~");
    return;
  }
  if (userInfo.value.id == store.state.loginUserInfo.id) {
    proxy.$modal.msgWarning("不能关注自己哦~");
    return;
  }
  focus(userInfo.value.id)
    .then(() => {
      userInfo.value.follow += 1;
      disabled.value = true;
      proxy.$modal.msgSuccess("关注成功");
    })
    .catch(() => {});
};
const cancel = () => {
  cancelFocus(userInfo.value.id)
    .then((res) => {
      userInfo.value.follow -= 1;
      disabled.value = false;
      proxy.$modal.msgWarning("操作成功");
    })
    .catch((e) => {});
};
</script>

<style lang="scss" scoped>
.top {
  background: white;
  padding: 30px 30px 30px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .fans {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    margin: 20px 0;
  }
  .hobby {
    width: 100%;
    display: block !important;
    .tags {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      gap: 10px;
    }
  }
}
.center {
  margin-top: 8px;
  background: white;

  .main {
    // height: 155px;
    // overflow-y: auto;
  }
  .title {
    text-align: center;
    line-height: 40px;
    border-bottom: 1px solid #ddd;
  }
  .list {
    border-bottom: 1px solid #ddd;
    line-height: 30px;
    padding: 8px 15px;
    .content {
      color: gray;
      font-size: 14px;
      width: 100%;
      overflow: hidden; //超出文本隐藏
      text-overflow: ellipsis; ///超出部分省略号显示
      display: -webkit-box; //弹性盒模型
      -webkit-box-orient: vertical; //上下垂直
      -webkit-line-clamp: 1; //自定义行数
    }
    .text {
      width: 100%;
      overflow: hidden; //超出文本隐藏
      text-overflow: ellipsis; ///超出部分省略号显示
      display: -webkit-box; //弹性盒模型
      -webkit-box-orient: vertical; //上下垂直
      -webkit-line-clamp: 1; //自定义行数
    }
  }
  //   .main::-webkit-scrollbar {
  //     display: none;
  //   }
}
.bottom {
  margin-top: 8px;
  background: white;
  .title {
    text-align: center;
    line-height: 40px;
    border-bottom: 1px solid #ddd;
  }
  .name {
    // height: 58px;
    // overflow-y: auto;
  }
  .name div {
    padding: 0 15px;
    line-height: 29.4px;
    width: 100%;
    overflow: hidden; //超出文本隐藏
    text-overflow: ellipsis; ///超出部分省略号显示
    display: -webkit-box; //弹性盒模型
    -webkit-box-orient: vertical; //上下垂直
    -webkit-line-clamp: 1; //自定义行数
  }
  //   .name::-webkit-scrollbar {
  //     display: none;
  //   }
}
</style>